<template>
  <div style="width: 1000px; height: 300px;">
    <p-echarts :option="option" height="280px" width="1000px" />
  </div>
</template>

<script>
import PEcharts from '@/components/charts/pEcharts'
import { postHandle } from '@/api'
export default {
  name: 'HjLineBig',
  components: { PEcharts },
  props: {
    geteWayCode: {
      type: String
    },
    obj: {
      type: Object
    }
  },
  data() {
    return {
      date: [],
      data1: [],
      data2: [],
      data3: [],
      data4: [],
      data5: [],
      data6: [],
      data7: [],
      data8: [],
      len: 0
    }
  },
  computed: {
    option() {
      // let series = []
      // // if (this.types.indexOf('current') !== -1) {
      // series.push({
      //   name: '电流',
      //   data: this.data1,
      //   type: 'line',
      //   lineStyle: {
      //     color: '#5CD5C8'
      //   },
      //   // smooth:true,    //拐弯处变锋利
      //   symbol: 'none', // 去除圆角
      //   sampling: 'average',
      //   animationDurationUpdate: 3000
      // })
      // //   }
      // //  if (this.types.indexOf('voltage') !== -1) {
      // series.push({
      //   name: '电压',
      //   data: this.data2,
      //   type: 'line',
      //   lineStyle: {
      //     color: '#A48AEA'
      //   },
      //   // smooth:true,    //拐弯处变锋利
      //   symbol: 'none', // 去除圆角
      //   sampling: 'average',
      //   animationDurationUpdate: 3000
      // })
      // //  }
      // //   if (this.types.indexOf('ss_speed') !== -1) {
      // series.push(
      //   {
      //     name: '焊接速度',
      //     data: this.data3,
      //     type: 'line',
      //     lineStyle: {
      //       color: '#EAD18A'
      //     },
      //     // smooth:true,    //拐弯处变锋利
      //     symbol: 'none', // 去除圆角
      //     sampling: 'average',
      //     animationDurationUpdate: 3000
      //   })
      // //   }
      // //    if (this.types.indexOf('haz_temp') !== -1) {
      // series.push({
      //   name: '热影响区温度',
      //   data: this.data4,
      //   type: 'line',
      //   lineStyle: {
      //     color: '#E07C71'
      //   },
      //   // smooth:true,    //拐弯处变锋利
      //   symbol: 'none', // 去除圆角
      //   sampling: 'average',
      //   animationDurationUpdate: 3000
      // })
      // //  }
      // //  if (this.types.indexOf('air_flux') !== -1) {
      // series.push({
      //   name: '气流量',
      //   data: this.data5,
      //   type: 'line',
      //   // smooth:true,    //拐弯处变锋利
      //   symbol: 'none', // 去除圆角
      //   sampling: 'average',
      //   animationDurationUpdate: 3000
      // })
      // //  }
      // //  if (this.types.indexOf('ar_purity') !== -1) {
      // series.push({
      //   name: '氩气纯度',
      //   data: this.data6,
      //   type: 'line',
      //   // smooth:true,    //拐弯处变锋利
      //   symbol: 'none', // 去除圆角
      //   sampling: 'average',
      //   animationDurationUpdate: 3000
      // })
      //   }
      return {
        legend: {
          data: ['电流', '电压', '焊接速度', '层间温度', '气流量', '氩/C02','电流上线', '电流下线'],
          // textStyle: {
          //   color: '#ffffff'
          // }
          formatter: (name) => {
            if (name === '电流') {
              return '{a1|' + (this.data1[this.data1.length - 1] ? this.data1[this.data1.length - 1] : 0) + 'A}\n{b|' + name + '}'
            }
            if (name === '电压') {
              return '{a2|' + (this.data2[this.data2.length - 1] ? this.data2[this.data2.length - 1] : 0) + 'V}\n{b|' + name + '}'
            }
            if (name === '焊接速度') {
              return '{a3|' + (this.data3[this.data3.length - 1] ? this.data3[this.data3.length - 1] : 0) + 'cm/min}\n{b|' + name + '}'
            }
            if (name === '层间温度') {
              return '{a4|' + (this.data4[this.data4.length - 1] ? this.data4[this.data4.length - 1] : 0) + '℃}\n{b|' + name + '}'
            }
            if (name === '气流量') {
              return '{a5|' + (this.data5[this.data5.length - 1] ? this.data5[this.data5.length - 1] : 0) + 'L/min}\n{b|' + name + '}'
            }
            if (name === '氩/C02') {
              return '{a6|' + (this.data6[this.data6.length - 1] ? this.data6[this.data6.length - 1] : 0) + '%}\n{b|' + name + '}'
            }
            if (name === '电流上限') {
              return '{a7|' + (this.data7[this.data7.length - 1] ? this.data7[this.data7.length - 1] : 0) + 'A}\n{b|' + name + '}'
            }
            if (name === '电流下限') {
              return '{a8|' + (this.data8[this.data8.length - 1] ? this.data8[this.data8.length - 1] : 0) + 'A}\n{b|' + name + '}'
            }
            return name
          },
          textStyle: {
            rich: {
              a1: {
                fontSize: 22,
                color: '#5CD5C8',
                verticalAlign: 'top',
                padding: [30, 0, 0, -20]
              },
              a2: {
                fontSize: 22,
                color: '#A48AEA',
                verticalAlign: 'top',
                padding: [30, 0, 0, -20]
              },
              a3: {
                fontSize: 22,
                color: '#EAD18A',
                verticalAlign: 'top',
                padding: [30, 0, 0, -20]
              },
              a4: {
                fontSize: 22,
                color: '#E07C71',
                verticalAlign: 'top',
                padding: [30, 0, 0, -20]
              },
              a5: {
                fontSize: 22,
                color: '#8ED55C',
                verticalAlign: 'top',
                padding: [30, 0, 0, -20]
              },
              a6: {
                fontSize: 22,
                color: '#D12A89',
                verticalAlign: 'top',
                padding: [30, 0, 0, -20]
              },
              a7: {
                fontSize: 22,
                color: '#FE2C24',
                verticalAlign: 'top',
                padding: [30, 0, 0, -20]
              },
              a8: {
                fontSize: 22,
                color: '#999AAA',
                verticalAlign: 'top',
                padding: [30, 0, 0, -20]
              },
              b: {
                fontSize: 12,
                lineHeight: 12,
                width: 80,
                color: '#ffffff',
                padding: [0, 0, -50, 0]
              }
            }
          }
        },
        grid: {
          left: 30,
          right: 15,
          bottom: 25,
          top: 80
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          data: this.date
        },
        color: ['#5CD5C8', '#A48AEA', '#EAD18A', '#E07C71', '#8ED55C', '#D12A89', '#FE2C24', '#999AAA'],
        yAxis: {
          max: 200,//最大值
          min: 0,//最小值
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#C2C2C2'
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            color: '#FFFFFF'
          },
          type: 'value'
        },
        series: [{
          name: '电流',
          data: this.data1,
          type: 'line',
          // smooth:true,    //拐弯处变锋利
          symbol: 'none', // 去除圆角
          sampling: 'average',
          animationDurationUpdate: 3000
        },
        {
          name: '电压',
          data: this.data2,
          type: 'line',
          // smooth:true,    //拐弯处变锋利
          symbol: 'none', // 去除圆角
          sampling: 'average',
          animationDurationUpdate: 3000
        },
        {
          name: '焊接速度',
          data: this.data3,
          type: 'line',
          // smooth:true,    //拐弯处变锋利
          symbol: 'none', // 去除圆角
          sampling: 'average',
          animationDurationUpdate: 3000
        },
        {
          name: '层间温度',
          data: this.data4,
          type: 'line',
          // smooth:true,    //拐弯处变锋利
          symbol: 'none', // 去除圆角
          sampling: 'average',
          animationDurationUpdate: 3000
        },
        {
          name: '气流量',
          data: this.data5,
          type: 'line',
          // smooth:true,    //拐弯处变锋利
          symbol: 'none', // 去除圆角
          sampling: 'average',
          animationDurationUpdate: 3000
        },
        {
          name: '氩/C02',
          data: this.data6,
          type: 'line',
          // smooth:true,    //拐弯处变锋利
          symbol: 'none', // 去除圆角
          sampling: 'average',
          animationDurationUpdate: 3000
        },{
          name: '电流上限',
          data: this.data7,
          type: 'line',
          // smooth:true,    //拐弯处变锋利
          symbol: 'none', // 去除圆角
          sampling: 'average',
          animationDurationUpdate: 3000
        },{
          name: '电流下限',
          data: this.data8,
          type: 'line',
          // smooth:true,    //拐弯处变锋利
          symbol: 'none', // 去除圆角
          sampling: 'average',
          animationDurationUpdate: 3000
        }]
      }
    }
  },
  watch: {
    obj(val) {
      // let data = val.find(item => item.geteWay_code === this.geteWayCode)
      this.getData(val)
    }
  },
  mounted() {
    // let data = this.dataList.find(item => item.geteWay_code === this.geteWayCode)
    this.getData(this.obj)
  },
  methods: {
    getData(data) {
     
 
      if (this.date.length > 60) {
        this.date.shift()
        this.data1.shift()
        this.data2.shift()
        this.data3.shift()
        this.data4.shift()
        this.data5.shift()
        this.data6.shift()
        this.data7.shift()
        this.data8.shift()
      }
      if (data) {
        this.date.push(data['cjTime'])
        this.data1.push(data.current)
        this.data2.push(data.voltage)
        this.data3.push(data['ssSpeed'])
        this.data4.push(data['hazTemp'])
        this.data5.push(data['airFlux'])
        this.data6.push(data['arPurity'])
        this.data7.push(data.currentsx)
        this.data8.push(data.currentxx)
      }else{
        this.date.push(0)
        this.data1.push(0)
        this.data2.push(0)
        this.data3.push(0)
        this.data4.push(0)
        this.data5.push(0)
        this.data6.push(0)
        this.data7.push(140)
        this.data8.push(60)
      }
      // postHandle('/ekjdTest/api/HJDatas', { 'geteWay_code': [geteWayCode] }).then(res => {
      //   if (this.date.length > 60) {
      //     this.date.shift()
      //     this.data1.shift()
      //     this.data2.shift()
      //     this.data3.shift()
      //     this.data4.shift()
      //     this.data5.shift()
      //     this.data6.shift()
      //   }
      //   let data = res.result
      //   if (data && data.length > 0) {
      //     data.forEach((item, index) => {
      //       this.date.push(item['cj_time'])
      //       this.data1.push(item.current)
      //       this.data2.push(item.voltage)
      //       this.data3.push(item['ss_speed'])
      //       this.data4.push(item['haz_temp'])
      //       this.data5.push(item['air_flux'])
      //       this.data6.push(item['ar_purity'])
      //     })
      //   }
      // })
    }
  }
}
</script>

<style scoped>

</style>
